<template>

  <div class='container'>
 <el-card>

    <div slot="header" class="clearfix">
     <!-- 学生科目 -->
     <el-row :gutter="20">
      <el-col :span="19">
        <div class="grid-content bg-purple">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="学生科目" style="margin-left: 15px">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button @click.native="qingc">清除</el-button>
              <el-button type="primary" @click="keyword">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>

      <el-col :span="1">
        <div class="grid-content bg-purple">
          <el-button  type="success" @click="xueke">新增学科</el-button>

        </div>

      </el-col>
      <!-- 学生科目 -->
      <!-- 警告 -->
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-alert title="数据一共26条" type="info" style="margin-left: 1px" show-icon>

          </el-alert>
          <!-- 警告 -->
        </div>
      </el-col>
    </el-row>

    <!-- 表格 -->
 <!-- 遍历接受过来的对象 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" type="index">
        <!-- scope.row=tableDate -->
      </el-table-column>
      <el-table-column label="学科名称" prop="subjectName">
      </el-table-column>
      <el-table-column label="创建者" prop="username">
      </el-table-column>
      <el-table-column label="创建日期" >
<!-- <template slot-scope="scope">{{scope.timeOfEntry|getFormateTime}}</template> -->
    </el-table-column>
      <el-table-column label="前台是否显示" prop="isFrontDisplay" >
      </el-table-column>
      <el-table-column label="二级目录"  prop="tags">
      </el-table-column>
      <el-table-column label="标签" prop="totals">
      </el-table-column>
      <el-table-column label="题目数量" prop="twoLevelDirectory">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text">分类</el-button>
          <el-button type="text" @click="$router.push(`/subjects/tags?id=${scope.row.id}&name=${scope.row.subjectName}`)">标签</el-button>
          <el-button type="text" @click="xiugai(scope.row)">修改</el-button>
          <el-button type="text" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->
    <!-- 分页 -->
  </div>

    <div class="block">
<!--
      <el-pagination
      @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
         :page-size="data.pagesize"
         layout="total, sizes, prev, pager, next, jumper"
        :total="+counts">
      </el-pagination> -->
      <!-- 分页 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[2,5,8,10]"
      :page-size="data.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="counts">
    </el-pagination>

  </div>
 </el-card>
     <!-- 插槽 -->
     <subjects :showDialog='showDialog' @closeDialog='closeDialog' @list='getlist' :obj="obj"/>
  </div>

</template>

<script>

import { list, remove, update } from '../../api/hmmm/subjects'
import subjects from './subjects/index.vue'
export default {
  data () {
    return {
      // 弹窗
      showDialog: false,
      formInline: {
        user: '',
        region: ''
      },
      // 表格
      tableData: [],
      tableData1: [],
      page: 1,
      pagesize: 10,
      pages: '',
      counts: 0,
      data: {
        page: 1,
        pagesize: 10
      },
      obj: {}
      // 表格
      // 新增学科
    }
  },
  methods: {
    // 清除
    qingc () {
      if (this.formInline.user === '') {
        this.$message.error('您的数据已经是空啦')
      } else {
        this.formInline = {
          user: '',
          region: ''
        }
        this.$message({

          message: '清除数据成功',
          type: 'success'
        })
      }
    },
    // 表格
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    // 表格
    // 分页
    handleSizeChange (val) {
      this.data.pagesize = val
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.data.page = val
      this.getlist(this.data)
    },
    async getlist () {
    // 发起请求，并接受数据
      const { data } = await list(this.data)
      console.log(data)
      // 接受对象
      this.counts = data.counts
      this.pages = data.pages
      this.tableData1 = data.items
      this.tableData = data.items
    },
    xueke () {
      this.showDialog = true
    },
    closeDialog () {
      this.showDialog = false
    },
    del (row) {
      // console.log(id)
      // 弹窗
      this.$confirm('亲，您确定要删除吗?', '温馨提示').then(async () => {
        // 调用接口 传入id值
        await remove(row)
        // 提示删除成功
        // 回显
        this.$message.success('删除成功')
        this.getlist()
      }).catch(() => {})
    },
    async xiugai (id) {
      // update(this.)
      this.showDialog = true
      const res = await update(id)
      this.obj = JSON.parse(res.config.data)
      console.log(this.obj)
    },
    async  keyword () {
      const list = []
      this.tableData1.forEach(item => {
        const arr = item.subjectName
        const arr1 = arr.split('').find(items => items === this.formInline.user)
        if (arr1) {
          list.push(item)
        }
      })
      this.tableData = list
    }
  },

  // 表格里面数据

  created () {
    this.getlist()
  },
  components: {
    subjects
  }

}
</script>

<style scoped lang='scss'>
.container {
  position: relative;
  padding: 20px;
}

.el-row {
  margin-top: 10px;

}

.el-alert {
  margin-left: 5px;

}

.el-pagination {
  position: absolute;
  margin-top: 10px;
  margin-left: 750px;
}

</style>
